<template>
  <div>
    <Poptip trigger="hover" :transfer="true" placement="bottom" popper-class="qrCodePopper"
            style="display: inline-block !important;">
      <img src="@/assets/img/home-ewm-white.png" alt="" class="width16 height16">
      <span slot="content">
        <img :src="miniProgram" alt="" class="width84 height84 disblock mauto">
        <div class="font12 color333 line14 mt5 tc">下载二维码
          <a @click="download(miniProgram,'医保社保缴费小程序.jpg')">
            <img src="@/assets/img/download.png" alt="" class="ml4">
          </a>
        </div>
      </span>
    </Poptip>
  </div>
</template>

<script>
export default {
  name: 'QrCode',
  computed: {},
  props: {},
  data() {
    return {
      miniProgram: process.env.NODE_ENV === 'production' || process.env.VUE_APP_EVN_CONFIG === 'pro' ? require('@/assets/img/home-miniProgram.jpg') : require('@/assets/img/home-miniProgramTrial.jpg'),
    }
  },
  methods: {
    // 图片下载
    download(url, name) {
      if (!url) {
        return;
      }
      var a = document.createElement("a")
      a.setAttribute("href", url)
      a.setAttribute("download", name);
      a.setAttribute("target", "_blank")
      let clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    },
  },
}
</script>

<style lang="less">
.qrCodePopper {
  min-width: auto !important;

  .ivu-poptip-body {
    padding: 15px 18px 0 18px;
  }

  .ivu-poptip-body-content {
    height: 110px;
  }
}
</style>
